<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";

onMounted(() => {
  // 解决 Cesium 资源路径问题

  // Cesium.Ion.defaultAccessToken =
  //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzBhYWJjNC02MzIyLTQxYzgtOWY0My0xM2U5YTNkODJiODMiLCJpZCI6MTYyMzA5LCJpYXQiOjE2OTI4NjExMjZ9.xl0_EdFT5Y-aTa-lrjBeLwZuupxDYScyrvk7mZboH8M";
  window.CESIUM_BASE_URL = "/Cesium";

  // 初始化 Cesium Viewer
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: false, //是否显示动画控制操作按钮
    baseLayerPicker: false, //底图背景选择框
    geocoder: false, //右上角查找放大镜
    timeline: false, //时间线是否显示
    sceneModePicker: false, //二维三维投影方式显示
    navigationHelpButton: false, //取消右上角的问号
    homeButton: false, //首页按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    fullscreenButton: true, //右下角的全屏按钮

    // terrainProvider: Cesium.createWorldTerrain(),  //这种加载地形在较新的cesium中去除了这个
    // 最新是这样加载地形的
    // terrain: Cesium.Terrain.fromWorldTerrain({
    //   requestVertexNormals: true, //开启地形光照
    //   requestWaterMask: true, // 开启水面波纹
    // }),

    // 不使用默认的影像图层
    baseLayerPicker: false,
  });
  // 定义高德地图的子域名数组
  var gaodeSubdomains = ["webrd01", "webrd02", "webrd03", "webrd04"];

  // 创建高德街道地图的影像图层
  var gaodeStreetMap = new Cesium.UrlTemplateImageryProvider({
    url:
      "http://{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
    subdomains: gaodeSubdomains,
    minimumLevel: 1,
    maximumLevel: 18,
  });
  // 创建 ArcGIS 世界影像地图的影像图层
  var worldArcGISMap = new Cesium.UrlTemplateImageryProvider({
    url:
      "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",

    minimumLevel: 1,
    maximumLevel: 18,
  });

  // 将高德街道地图图层添加到 Viewer 中
  // var gaodeLayer = viewer.imageryLayers.addImageryProvider(gaodeStreetMap);
  // 将 ArcGIS 世界影像地图图层添加到 Viewer 中
  var arcgisLayer = viewer.imageryLayers.addImageryProvider(worldArcGISMap);
  // arcgisLayer.alpha = 0.5;
  gaodeLayer.alpha = 0.5;
  // 调整图层顺序（可根据需求调整）
  viewer.imageryLayers.raiseToTop(gaodeLayer);
});
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
:deep(.cesium-widget-credits) {
  display: none;
}
</style>
